<template>
	<div id="StoreCert">
		<x-header :left-options="{showBack: false}" title="商户认证" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="cert-content">
			<ul>
				<li>
					<x-input title="企业名称" @input="storeNameInput($event)" :value="storeInfo.certify_name" type="text" placeholder="企业名称" :show-clear="false" />
				</li>
				<li>
					<x-input title="经营地址" @input="storeAddressInput($event)" :value="storeInfo.certify_address" type="text" :show-clear="false" placeholder="经营地址" />
				</li>
				<li>
					<x-input title="营业执照" @input="businessCardInput($event)" :value="storeInfo.certify_number" type="text" :show-clear="false" placeholder="请输入营业执照编码" />
				</li>
			</ul>
			<div class="card-wrap">
				<div class="title-bar">
					<span class="jian">企业营业执照扫描件</span>
				</div>
				<ul class="id-list">
					<li id="license_pic">
						<img v-if="storeInfo.certify_img" :src="'/los' + storeInfo.certify_img" alt="" />
						<img v-else src="../../assets/images/home/icon_license.png" alt="" />
					</li>
					<li class="upload license">
						<input type="file" id="file0" class="fileWrap" accept="image/*" />
						<img src="../../assets/images/home/icon_add.png" alt="" />
						<p>上传营业执照扫描件</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="cert-content">
			<ul>
				<li>
					<x-input title="企业法人" :value="certInfo.identity_name" @input="usernameInput($event)" type="text" :show-clear="false" placeholder="法人姓名" />
				</li>
				<li>
					<x-input title="法人身份证" :value="certInfo.identity_number" @input="cardInput($event)" :show-clear="false" name="card" placeholder="法人身份证号码" type="text"></x-input>
				</li>
				<li>
					<x-input title="手机号" :value="certInfo.identity_mobile" @input="moblieInput($event)" :show-clear="false" name="mobile" placeholder="手机号码" keyboard="number" is-type="china-mobile"></x-input>
				</li>
			</ul>
			<div class="card-wrap">
				<div class="title-bar">
					<span>法人认证</span>
					<b>(请按示例上传照片)</b>
				</div>
				<ul class="id-list">
					<li id="font_pic">
						<img v-if="certInfo.identity_front_pic" :src="'/los' + certInfo.identity_front_pic" alt="" />
						<img v-else src="../../assets/images/home/icon_id_font.png" alt="" />

					</li>
					<li class="upload">
						<input type="file" id="file1" class="fileWrap" accept="image/*" />
						<img src="../../assets/images/home/icon_add.png" alt="" />
						<p>请上传正面证件照</p>
					</li>
				</ul>
				<ul class="id-list">
					<li id="back_pic">
						<img v-if="certInfo.identity_back_pic" :src="'/los' + certInfo.identity_back_pic" alt="" />
						<img v-else src="../../assets/images/home/icon_id_back.png" alt="" />
					</li>
					<li class="upload">
						<input type="file" id="file2" class="fileWrap" accept="image/*" />
						<img src="../../assets/images/home/icon_add.png" alt="" />
						<p>请上传背面证件照</p>
					</li>
				</ul>
			</div>
			<div class="footer-bar">
				<p>您的所有认证信息仅供平台审核使用</p>
				<div class="button disable" v-if="certInfo.certify_state == 1">审核通过</div>
				<div class="button" v-else @click="storeCertInfo">提交申请</div>
			</div>
		</div>
		<confirm v-model="show4" :show-cancel-button="false" cancel-text="返回" title="个人认证申请提交成功" @on-cancel="onCancel" @on-confirm="onConfirm">
			<p>是否提交店铺资料</p>
		</confirm>
		<toast v-model="success" type="text" width='4rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import { XHeader, XInput, Toast, PopupPicker, Confirm } from 'vux'
	import 'lrz/dist/lrz.all.bundle'
	import $ from 'jquery'
	export default {
		data() {
			return {
				card: '',
				phone: '',
				legalname: '',
				address: '',
				firmname: '',
				success: false,
				msg: '',
				storeInfo: '',
				certInfo: '',
				shop_name: '',
				shop_logo: '',
				shop_id: '',
				shop_tags: '',
				market_id: '',
				detail_block: '',
				checked: [],
				radio1: [],
				licenseCard: '',
				show4: false
			}
		},
		components: {
			XHeader,
			XInput,
			Toast,
			PopupPicker,
			Confirm
		},
		mounted() {
			//头像
			let _this = this;
			$("#file0").change(function() {
				var _this = $(this);
				lrz(this.files[0]).then(function(data) {
					console.log(data);
					let str = '<li id="license">' +
						'<img src ="' + data.base64 + '"/>' +
						'<input type="hidden" id="images" name="images" value="' + data.base64 + '"/>'; +
					'</li>';
					$('.id-list').find('#license_pic').replaceWith(str);
				})

			});
			$("#file1").change(function() {
				var _this = $(this);
				lrz(this.files[0]).then(function(data) {
					console.log(data);
					let str = '<li id="font_upload">' +
						'<img src ="' + data.base64 + '"/>' +
						'<input type="hidden" id="images" name="images" value="' + data.base64 + '"/>'; +
					'</li>';
					$('.id-list').find('#font_pic').replaceWith(str);
				});
			});
			$("#file2").change(function() {
				var _this = $(this);
				lrz(this.files[0]).then(function(data) {
					console.log(data);
					let str = '<li id="back_upload">' +
						'<img src ="' + data.base64 + '"/>' +
						'<input type="hidden" id="images" name="images" value="' + data.base64 + '"/>'; +
					'</li>';
					$('.id-list').find('#back_pic').replaceWith(str);
				})
			});

		},
		activated() {
			this.getStoreCertInfo();
			this.getUserCertInfo();
		},
		methods: {
			//企业
			getStoreCertInfo: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/member/certify.json',
					data: ''
				}).then((result) => {
					console.log(result);
					if(result.data.code == 1) {
						this.storeInfo = result.data.data;
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//个人
			getUserCertInfo: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/member/identity.json',
					data: ''
				}).then((result) => {
					console.log(result);
					if(result.data.code == 1) {
						this.certInfo = result.data.data;
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			storeNameInput: function(e) {
				this.firmname = e;
			},
			storeAddressInput: function(e) {
				this.address = e;
			},
			usernameInput: function(e) {
				this.legalname = e;
			},
			cardInput: function(e) {
				this.card = e;
			},
			moblieInput: function(e) {
				this.phone = e;
			},
			businessCardInput: function(e) {
				this.licenseCard = e;
			},
			storeCertInfo: function() {
				var font_pic = $('#font_upload input').val();
				var back_pic = $('#back_upload input').val();
				var license = $('#license input').val();
				//企业
				var certify_param = {
					certify_name: this.firmname,
					certify_address: this.address,
					certify_img: license,
					certify_number: this.licenseCard
				}
				//法人
				var identity_param = {
					identity_name: this.legalname,
					identity_number: this.card,
					identity_mobile: this.phone,
					identity_back_pic: back_pic,
					identity_front_pic: font_pic,
				};
				if(this.firmname == '') {
					this.success = !this.success;
					this.msg = '请输入企业名称'
				} else if(this.licenseCard == '') {
					this.success = !this.success;
					this.msg = '请输入营业执照编码'
				} else if(this.address == '') {
					this.success = !this.success;
					this.msg = '请输入经营地址'
				} else if(license == '') {
					this.success = !this.success;
					this.msg = '请上传营业执照扫描件'
				} else if(this.legalname == '') {
					this.success = !this.success;
					this.msg = '请输入企业法人名字'
				} else if(this.card == '') {
					this.success = !this.success;
					this.msg = '请输入法人身份证'
				} else if(this.phone == '') {
					this.success = !this.success;
					this.msg = '请输入手机号'
				} else if(font_pic == '') {
					this.success = !this.success;
					this.msg = '请上传正面证件照'
				} else if(back_pic == '') {
					this.success = !this.success;
					this.msg = '请上传背面证件照'
				} else if(this.card.length < 18) {
					this.success = !this.success;
					this.msg = '请输入正确法人身份证'
				} else {
					this.$http({
						method: 'POST',
						url: '/los/api/member/certify.json',
						data: certify_param
					}).then((result) => {
						console.log(result);
						if(result.data.code == 1) {
							this.$http({
								method: 'POST',
								url: '/los/api/member/identity.json',
								data: identity_param
							}).then((result) => {
								if(result.data.code == 1) {
									this.success = !this.success;
									this.msg = result.data.msg;
									this.show4 = !this.show4;
								} else {
									this.success = !this.success;
									this.msg = result.data.msg;
								}
							}).catch((err) => {
								console.log(err);
							})
						}
					}).catch((err) => {
						console.log(err);
					})
				}
			},
			onConfirm: function() {
				location.href = '#/ShopIntro'
			},
			onCancel: function() {
				location.href = '#/Certification'
			},
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.cert-content {
		background: #fff;
		width: 100%;
		position: relative;
		margin-top: 0.26rem;
		height: 100%;
	}

	.upload p .fileWraps {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1.13rem;
		opacity: 0;
	}

	.upload #headimg {
		width: 1.13rem;
		height: 1.13rem;
		border-radius: 50%;
	}

	.upload p span {
		display: inline-block;
		float: left;
		font-size: 0.37rem;
		color: #333;
	}

	.header {
		background: #fff;
	}

	.cert-content:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}

	.cert-content ul {
		width: 100%;
		padding: 0 0.26rem;
	}

	.cert-content>ul li {
		width: 100%;
		height: 1.3rem;
		line-height: 1.3rem;
		position: relative;
		padding-top: 0.1rem;
	}

	.cert-content>ul li:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 1.3rem;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}

	.cert-content>ul li .weui-cell {
		padding: 0!important;
	}

	.cert-content>ul li input {
		font-size: 0.37rem;
		color: #ccc;
	}

	.cert-content>ul li span {
		font-size: 0.37rem;
		color: #333;
		width: 2.1rem;
		line-height: 1.3rem;
		display: inline-block;
	}

	.cert-content .card-wrap .title-bar {
		height: 1.3rem;
		line-height: 1.3rem;
		padding: 0 0.26rem;
	}

	.card-wrap .title-bar span {
		font-size: 0.37rem;
		color: #333;
		width: 2.1rem;
		line-height: 1.3rem;
		display: inline-block;
	}

	.card-wrap .title-bar .jian {
		width: 3.8rem;
	}

	.card-wrap .title-bar b {
		font-weight: normal;
		font-size: 0.37rem;
		color: #aaa;
	}

	.card-wrap .id-list {
		overflow: hidden;
	}

	.card-wrap .id-list li {
		float: left;
		margin-bottom: 0.45rem;
		position: relative;
	}

	.card-wrap .id-list .upload img {
		width: 0.8rem;
		height: 0.8rem;
		margin: 0.61rem auto 0.4rem;
	}

	.card-wrap .id-list li .fileWrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 4.42rem;
		height: 2.61rem;
		opacity: 0;
	}

	.card-wrap .id-list .upload {
		border: dashed 1px #1874da;
		width: 4.42rem;
		height: 2.61rem;
		margin-left: 0.61rem;
		text-align: center;
		border-radius: 0.13rem;
	}

	.card-wrap .id-list .upload p {
		font-size: 0.32rem;
		color: #333;
	}

	.card-wrap .id-list li img {
		width: 4.42rem;
		height: 2.61rem;
	}

	.footer-bar {
		margin-top: 1.2rem;
		font-size: 0.32rem;
		color: #aaa;
		text-align: center;
	}

	.footer-bar .button {
		width: 9.04rem;
		height: 1.17rem;
		background: #1874da;
		line-height: 1.17rem;
		color: #fff;
		font-size: 0.4rem;
		margin: 0.26rem 0.48rem 0.4rem;
		border-radius: 0.05rem;
	}

	.footer-bar .disable {
		background: #aaa;
	}
</style>
<style>
	.card-wrap .id-list #font_upload,
	.card-wrap .id-list #back_upload,
	.card-wrap .id-list #license {
		width: 4.42rem;
		height: 2.61rem;
		float: left;
	}

	.card-wrap .id-list #license {
		margin-bottom: 0.45rem;
	}

	.card-wrap .id-list #font_upload img,
	.card-wrap .id-list #back_upload img,
	.card-wrap .id-list #license img {
		width: 100%;
		height: 100%;
	}
</style>
